<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2024-06-18 15:55:08
 * @Description: 
-->
<template>
    <div>
        <el-dialog :modelValue="props.inputData.visible" title="文件选择(单选)" width="80%" center
            :before-close="closeFileDialog">
            <el-row>
                <el-col :span="6">
                    <el-card class="file-card" :style="`height:${view.height - 350}px`">
                        <el-tree style="max-width: 600px" :props="props1" :load="loadNode" lazy
                            :default-expanded-keys="[0]" node-key="id" @node-click="getFilesbyExpand">
                            <template #default="{ node, data }">
                                <span class="custom-tree-node">
                                    <el-icon>
                                        <Folder />
                                    </el-icon> <span>{{ node.label }}</span>
                                </span>
                            </template>
                        </el-tree>
                    </el-card>
                </el-col>
                <el-col :span="18" style="padding-left: 10px;">
                    <el-card class="file-select-card" :style="`height:${view.height - 350}px`">
                        <template #header>
                            <el-row>
                                <el-col :span="24" class="search-container">
                                    <div>
                                        文件名称&nbsp;
                                        <el-input :prefix-icon="Search" style="width: 200px;" size="small"
                                            v-model="fileName" clearable placeholder="请输入名" /> &nbsp;
                                    </div>
                                    <div>
                                        文件类型&nbsp;
                                        <el-cascader @change="getFiles" style="width: 240px" v-model="fileType"
                                            :options="filterOptions" :props="props2" :show-all-levels="false"
                                            collapse-tags clearable />
                                    </div>
                                </el-col>
                            </el-row>
                        </template>
                        <el-table ref="" :height="view.height - 490" :data="filterTableData" style="width: 100%"
                            highlight-current-row @current-change="handleCurrentChange" :border="true">
                            <el-table-column  :align="'center'" type="index" width="50" />
                            <el-table-column :align="'left'" property="name" label="文件" show-overflow-tooltip>
                                <template #default="scope">
                                    {{ scope.row.name }}
                                </template>
                            </el-table-column>
                            <el-table-column :align="'left'" property="name" label="文件路径" show-overflow-tooltip>
                                <template #default="scope">
                                    {{ scope.row.fullPath }}
                                </template>
                            </el-table-column>
                            <el-table-column :align="'center'" label="日期" width="180">
                                <template #default="scope">
                                    <span>
                                        {{ utils.formatDate(scope.row.date) }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column :align="'center'" property="type" label="类型" width="100">
                                <template #default="scope">
                                    <el-tag>{{ scope.row.type }}</el-tag>
                                </template>
                            </el-table-column>
                            <!--  <el-table-column :align="'center'" property="size" label="大小" show-overflow-tooltip>
                                <template #default="scope">
                                    <span>{{ scope.row.size }} KB</span>
                                </template>
                            </el-table-column> -->
                        </el-table>
                    </el-card>
                </el-col>
            </el-row>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeFileDialog">取消</el-button>
                    <el-button type="primary" @click="submitHandler">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { defineComponent, reactive,computed, ref, toRefs, onMounted, watch  } from "vue";
import HttpService from "@/api/api";
import { ElMessage, ElMessageBox, genFileId, } from "element-plus";
import * as _ from "lodash";
import { ElTable } from 'element-plus'
import utils from '@/utils/util'
import { Search } from "@element-plus/icons-vue";
// import { ElMessage, ElMessageBox } from "element-plus";
import config from "@/config/config";

const props = defineProps({
    inputData: Object
});

// 定义要发射的事件
const emits = defineEmits(['dialogSubmit', 'closeFileDialog']);

const fileList = ref([])
const fileName = ref('')

interface File {
    date: string
    name: string
    size: number
    type: string
    fullPath: string
}

/* const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<File[]>([])
const handleSelectionChange = (val: File[]) => {
    multipleSelection.value = val
} */

const currentRow = ref(null)
const handleCurrentChange = (val: File | undefined) => {
    currentRow.value = val
}
let currenPath = ref('')
const fileType = ref([])
const props2 = {
    multiple: true,
    expandTrigger: 'hover' as const,
}
const filterOptions = [
    {
        value: 'shpFilter',
        label: '矢量文件',
        children: [
            {
                value: '.shp',
                label: '.shp',
            },
        ],
    },
    {
        value: 'tifFilter',
        label: '影像文件',
        children: [
            {
                value: '.tif',
                label: '.tif',
            },
            {
                value: '.tiff',
                label: '.tiff',
            },
            {
                value: '.img',
                label: '.img',
            },
            {
                value: '.ldf',
                label: '.ldf',
            },
            {
                value: '.hdr',
                label: '.hdr',
            },
            {
                value: '.jp2',
                label: '.jp2',
            },
        ],
    },
    {
        value: 'TxtFilter',
        label: '文本文件',
        children: [
            {
                value: '.txt',
                label: '.txt',
            },
        ],
    },
    {
        value: 'CsvFilter',
        label: '表格文件',
        children: [
            {
                value: '.csv',
                label: '.csv',
            },
        ],
    },
]

onMounted(() => {

});

var view = reactive({
    height: window.innerHeight,
});

const submitHandler = function () {
    if (currentRow.value) {
        emits('dialogSubmit', currentRow)
        closeFileDialog()
    } else {
        ElMessage({
            message: "请选择至少一个文件 ",
            type: "warning",
        });
    }
}

const closeFileDialog = function () {
    emits('closeFileDialog')
}

interface Tree {
    id?: number
    name: string
    leaf?: boolean
    fullPath: string
}

const props1 = {
    label: 'name',
    children: 'zones',
    isLeaf: 'leaf',
}

const loadNode = (node, resolve: (data: Tree[]) => void) => {
    if (node.level === 0) {
        resolve([{
            id: 0,
            name:config.dir_base_name,
            fullPath: config.dir_base_path
        }])
    } else {
        let params = {
            folderPath: node.data.fullPath
        };
        HttpService.foldersManage.getFolders(
            params,
            (res) => {
                if (res.status == 200) {
                    resolve(res.data)
                }

            },
            (error) => {
                console.log(error);
            }
        );
    }
}

const getFilesbyExpand = function (node) {
    currenPath.value = node.fullPath
    getFiles()
}
const getFiles = function () {
    fileList.value.length = 0
    let params = {
        folderPath: currenPath.value,
        type: (() => {
            let type = []
            fileType.value.forEach(element => {
                type.push(element[1])
            });
            return type
        })()
    };
    HttpService.foldersManage.getFiles(
        params,
        (res) => {
            if (res.status == 200) {
                console.log(res.data.files)
                res.data.files.forEach(item => {
                    fileList.value.push(item)
                })
            }
        },
        (error) => {
            console.log(error);
        }
    );
}

const filterTableData = computed(() =>
fileList.value.filter(
    (data) =>
      !fileName.value || data.name.toLowerCase().includes(fileName.value.toLowerCase())
  )
)




</script>
<style lang="scss" scoped>
.search-container {
    display: flex;
    justify-content: space-between
}
</style>
<style lang="scss">
.file-select-card{
    overflow: auto;
    .el-table {
        tr {
            cursor: pointer;
        }

        .el-table__body tr.current-row> {
            td.el-table__cell {
                // transition: all 1s;
                background-color: #0b0c0c75;
                // background-color: #03253dda!important;
                color: #409EFF;
            }
        }
    }
}
</style>